<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container">
        <ud-card v-loading="loading">
            <div v-show="!show_detail">
                <div class="myheader">
                    <div class="part-left">
                        <el-select size="small" v-model="cat">
                            <el-option v-for="cat, i in cats" :key="i" :label="cat" :value="cat" />
                        </el-select>
                        <el-radio-group size="small" v-model="read_status" style="margin-left: 10px;">
                            <el-radio label="unread">未读</el-radio>
                            <el-radio label="read">已读</el-radio>
                            <el-radio label="all">全部</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="part-right">
                        <div class="block" v-if="selection_items.length">
                            <el-button size="small" type="danger" icon="el-icon-delete"
                                @click="deleteSelectHandle">删除</el-button>
                        </div>
                        <div class="block" v-if="show_read_all">
                            <el-button size="small" type="primary" icon="el-icon-check"
                                @click="readAllHandle">全部已读</el-button>
                        </div>
                        <div class="block" v-if="show_read_select">
                            <el-button size="small" type="success" icon="el-icon-check"
                                @click="readSelectHandle">标记已读</el-button>
                        </div>
                        <div class="block">
                            <el-button size="small" icon="el-icon-refresh" @click="loadData">刷新</el-button>
                        </div>

                    </div>
                </div>
                <el-divider></el-divider>
                <el-table :data="items" size="small" @selection-change="handleSelectionChange" fit
                    highlight-current-row>
                    <el-table-column type="selection" width="60">
                    </el-table-column>
                    <el-table-column prop="id" width="50px" label="#" />
                    <el-table-column prop="title" label="标题">
                        <template slot-scope="scope">
                            <el-tag size="mini" type="warning" v-if="scope.row.unread">未读</el-tag>
                            <span @click="viewHandle(scope.row)" :style="{ color: scope.row.unread ? '#333' : '#999', cursor: 'pointer', }">{{ scope.row.title }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="接收时间" width="180px">
                    </el-table-column>
                    <el-table-column prop="cat" label="消息类型" width="100px">
                    </el-table-column>
                    <el-table-column label="操作" width="50px">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="viewHandle(scope.row)">查看</el-link>
                        </template>
                    </el-table-column>
                </el-table>


                <div class="pager">
                    <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper"
                        :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="per_page"
                        :current-page="current_page" @current-change="updateCurrentPage"
                        @size-change="updatePageSize" />
                </div>
            </div>
            <item-detail v-show="show_detail" :currentItemId="current_item_id" @back="goBack" />
        </ud-card>
    </div>
</template>

<script>
import itemDetail from './itemDetail.vue'

import {
    getWebNoticeList,
    deleteWebNotice,
    readWebNotice,
    getWebNoticeCat,
    readAllWebNotice
} from "@/api/web-notice";
export default {
    components: { itemDetail, },
    name: 'webnotice',
    props: {
    },
    data() {
        return {
            loading: false,
            items: [],
            current_item_id: null,
            selection_items: [],
            total: 0,
            current_page: 1,
            per_page: 20,
            kw: '',
            show_detail: false,
            read_status: 'unread',
            cat: '全部消息',
            cats: [],
        };
    },
    watch: {
        current_page: function (newVal, oldVal) {
            this.loadData();
        },
        per_page: function (newVal, oldVal) {
            this.loadData();
        },
        cat: function () {
            this.current_page = 1
            this.loadData()
        },
        read_status: function () {
            this.current_page = 1
            this.loadData()
        },
    },
    computed: {
        show_read_all() {
            return this.items.filter(item => item.unread).length > 0
        },
        show_read_select() {
            return this.selection_items.filter(item => item.unread).length > 0
        }
    },
    mounted: function () {
        this.loadData();
        this.loadCats()
    },
    methods: {

        handleSelectionChange: function (items) {
            this.selection_items = items;
        },

        deleteSelectHandle() {
            var msg =
                "您确定要删除所选数据吗？";
            this.$confirm(msg, "删除确认").then((resp) => {
                this.loading = true;
                this.deleteRecursive(this.selection_items, 0);
            })
        },

        deleteRecursive(items, index) {
            if (index < items.length) {
                var item = items[index];
                deleteWebNotice(item.id).then(() => {
                    this.deleteRecursive(items, index + 1);
                }).catch((error) => {
                    console.error('Error deleting item:', error);
                    this.loading = false; 
                });
            } else {
                this.loadData();
                this.$store.dispatch("user/getUnreadNotice");
                this.loading = false;
            }
        },

        readSelectHandle() {
            this.loading = true
            var unread_Arr = this.selection_items.filter(item => item.unread)
            this.readRecursive(unread_Arr, 0)
        },

        readRecursive(items, index) {
            if (index < items.length) {
                var item = items[index];
                readWebNotice(item.id).then(() => {
                    this.readRecursive(items, index + 1);
                }).catch((error) => {
                    console.error('Error deleting item:', error);
                    this.loading = false; 
                });
            } else {
                this.loadData();
                this.$store.dispatch("user/getUnreadNotice");
                this.loading = false;
            }
        },

        updateCurrentPage: function (page) {
            this.current_page = page;
        },

        updatePageSize: function (size) {
            this.per_page = size || 10;
        },

        readAllHandle() {
            this.loading = true
            readAllWebNotice().then(resp => {
                this.loading = false
                if (resp.status != 0) {
                    return
                }
                this.$message.success("已全部已读")
                this.loadData()
                this.$store.dispatch("user/getUnreadNotice");
            })
        },

        viewHandle: function (item) {
            this.current_item_id = item.id;
            this.show_detail = true;
            readWebNotice(item.id).then(resp => {
                if (resp.code != 0) {
                    return
                }
                this.$store.dispatch("user/getUnreadNotice");
            })
        },

        goBack() {
            this.show_detail = false;
            this.current_item_id = null;
            this.current_page = 1
            this.loadData()
        },

        doSearch: function () {
            // 搜索
            this.loading = true;
            this.current_page = 1;
            this.loadData();
        },

        clearKw: function () {
            this.kw = "";
            this.loadData();
        },

        loadData: function () {
            this.loading = true;
            var _this = this
            var data = {
                page: _this.current_page,
                per_page: _this.per_page,
                kw: _this.kw || "",
            }
            if (this.read_status == 'read') {
                data.unread = false
            }
            if (this.read_status == 'unread') {
                data.unread = true
            }
            if (this.cat != '全部消息') {
                data.cat = this.cat
            }
            getWebNoticeList(data).then((resp) => {
                this.loading = false;
                if (resp.code != 0) {
                    return
                }
                this.items = resp.data.result;
                this.total = resp.data.page.total_items;
            });
        },

        loadCats() {
            getWebNoticeCat().then((resp) => {
                if (resp.code != 0) {
                    return
                }
                this.cats = resp.data
                this.cats.unshift('全部消息')
            });
        },

    },
};
</script>

<style scoped lang="scss">
.myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 20px 0px;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .block {
            margin-left: 10px;
        }
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .block {
            margin-right: 10px;
        }
    }
}
</style>
